<template>
  <z-auto-complete
    v-model:value="value"
    style="width: 200px"
    placeholder="input here"
    :options="options"
    @search="handleSearch"
  >
    <template #option="{value}">
      {{ value.split('@')[0] }} @
      <span style="font-weight: bold">{{ value.split('@')[1] }}</span>
    </template>
  </z-auto-complete>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('')
    const options = ref([])
    const handleSearch = val => {
      let res
      if (!val || val.indexOf('@') >= 0) {
        res = []
      } else {
        res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({
          value: `${val}@${domain}`
        }))
      }
      options.value = res
    }
    return {
      value,
      options,
      handleSearch
    }
  }
})
</script>
